<template>
  <a-modal
    :visible="visible"
    :width="modalWidth"
    :footer="null"
    :closable="false"
    :mask-closable="false"
    :keyboard="false"
    :wrap-class-name="wrapClassName"
    :body-style="bodyStyle"
    @cancel="handleClose"
  >
    <div
      class="flex flex-col max-h-[min(95dvh,60rem)] z-[9999] max-w-[95vw] overflow-hidden rounded-3xl bg-immich-bg shadow-md dark:bg-immich-dark-gray dark:text-immich-dark-fg pt-3 pb-4"
      tabindex="-1"
      aria-modal="true"
      :aria-labelledby="titleId"
    >
      <div class="immich-scrollbar overflow-y-auto pt-1" :class="{ 'pb-4': isStickyBottom }">
        <!-- <modal-header :id="titleId" :title="title" :show-logo="showLogo" :icon="icon" @close="handleClose" /> -->
        <div class="modal-header">
            <template v-if="showLogo">
                <!-- <img src="/path/to/logo.png" alt="Logo" class="modal-logo" /> -->
                <amber-logo :noText=true :width="32" />
            </template>
            <template v-else-if="icon">
                <a-icon :type="icon" class="modal-icon" />
            </template>
            <span class="modal-title">{{ title }}</span>
            <a-button
                type="text"
                icon="close"
                class="close-button"
                @click="onClose"
            />
        </div>
        <div class="px-5 pt-0 mb-5">
          <slot></slot>
        </div>
      </div>
      <div v-if="isStickyBottom" class="flex flex-col sm:flex-row justify-end w-full gap-2 sm:gap-4 sticky pt-4 px-5 bg-immich-bg dark:bg-immich-dark-gray border-t border-gray-200 dark:border-gray-500">
        <slot name="sticky-bottom"></slot>
      </div>
    </div>
  </a-modal>
</template>

<script>
import { Modal } from 'ant-design-vue';
import { generateId } from '$lib/utils/generate-id';
import AmberLogo from './immich-logo.svelte';

export default {
  components: {
    'a-modal': Modal,
    'amber-logo': AmberLogo
  },
  props: {
    onClose: {
      type: Function,
      required: true
    },
    title: {
      type: String,
      required: true
    },
    showLogo: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String,
      default: undefined
    },
    width: {
      type: String,
      default: 'narrow'
    },
    stickyBottom: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      visible: true,
      id: generateId(),
      modalWidth: '28rem'
    };
  },
  computed: {
    titleId() {
      return `${this.id}-title`;
    },
    isStickyBottom() {
      return this.stickyBottom;
    },
    wrapClassName() {
      return 'full-screen-modal';
    },
    bodyStyle() {
      return {
        padding: 0
      };
    }
  },
  watch: {
    width: {
      handler(newWidth) {
        switch (newWidth) {
          case 'extra-wide':
            this.modalWidth = '56rem';
            break;
          case 'wide':
            this.modalWidth = '48rem';
            break;
          case 'narrow':
            this.modalWidth = '28rem';
            break;
          default:
            this.modalWidth = 'sm:max-w-4xl';
        }
      },
      immediate: true
    }
  },
  methods: {
    handleClose() {
      this.visible = false;
      this.onClose();
    }
  }
};
</script>

<style scoped>
.full-screen-modal {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  display: flex;
  height: 100vh;
  width: 100vw;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.4);
}

.immich-scrollbar {
  overflow-y: auto;
  padding-top: 0.25rem;
}

.immich-scrollbar.pb-4 {
  padding-bottom: 1rem;
}
</style>